<template>
    <div v-loading="loading" class="flex-box content">
        <div class="l">
            <div class="title">审批流程</div>
            <div class="steps">
                <div
                    v-for="step in stepList"
                    :key="step.sort"
                    class="step"
                    :class="['审批拒绝', '归档拒绝'].includes(step.status) ? 'error' : ''"
                >
                    <div class="test">{{ step.status }}</div>
                    <div class="test remark">
                        {{ ['审批拒绝', '归档拒绝'].includes(step.status) ? '失败原因：' : '' }}{{ step.auditRemark }}
                    </div>
                    <div class="name">{{ step.auditUserName }}</div>
                    <time>{{ formatDate2(step.auditTime, 'YYYY-MM-DD HH:mm:ss') }}</time>
                </div>
            </div>
        </div>
        <div class="r">
            <div class="item">
                <div class="title">客户信息</div>
                <div class="grid">
                    <div class="flex-box">
                        <div class="flex-box cell">
                            <div class="label">投放主体</div>
                            <div class="val">{{ detailInfo.company }}</div>
                        </div>
                        <div class="flex-box cell">
                            <div class="label">签约主体</div>
                            <div class="val">{{ detailInfo.signCompanyName }}</div>
                        </div>
                    </div>
                    <div class="flex-box">
                        <div class="flex-box cell">
                            <div class="label">客户类型</div>
                            <div class="val">{{ detailInfo.companyPropertyName }}</div>
                        </div>
                        <div class="flex-box cell">
                            <div class="label">客户行业</div>
                            <div class="val">{{ detailInfo.industryName }}</div>
                        </div>
                    </div>
                    <div class="flex-box">
                        <div class="flex-box cell">
                            <div class="label">品牌名称</div>
                            <div class="val">{{ detailInfo.brandName }}</div>
                        </div>
                        <div class="flex-box cell">
                            <div class="label">销售名称</div>
                            <div class="val">{{ detailInfo.createUserName }}</div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="item">
                <div class="title">签约信息</div>
                <div class="grid">
                    <div class="flex-box">
                        <div class="flex-box cell">
                            <div class="label">签约编码</div>
                            <div class="val">{{ detailInfo.applyCode }}</div>
                        </div>
                        <div class="flex-box cell">
                            <div class="label">报价审批编码</div>
                            <div class="val">{{ detailInfo.quoteApplyCode }}</div>
                        </div>
                    </div>
                    <div class="flex-box">
                        <div class="flex-box cell">
                            <div class="label">签约总金额</div>
                            <div class="val">{{ numberToCurrencyNo(detailInfo.totalAmount) }}</div>
                        </div>
                        <div class="flex-box cell">
                            <div class="label">签约类型</div>
                            <div class="val">{{ detailInfo.signTypeName }}</div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="item">
                <div class="title">刊播信息</div>
                <div v-for="(plan, index) in detailInfo.joinPlanPlayRequestDTOS" :key="index" class="grid">
                    <div class="plan-title">计划{{ index + 1 }}</div>
                    <div class="flex-box">
                        <div class="flex-box cell">
                            <div class="label">标准条单价</div>
                            <div class="val">{{ detailInfo.unitPrice }}</div>
                        </div>
                        <div class="flex-box cell">
                            <div class="label">广告规格</div>
                            <div class="val">{{ plan.advertisingSize }}</div>
                        </div>
                    </div>
                    <div class="flex-box">
                        <div class="flex-box cell">
                            <div class="label">预计开始时间</div>
                            <div class="val">{{ formatDate2(plan.planPlayTimeBegin, 'YYYY-MM-DD') }}</div>
                        </div>
                        <div class="flex-box cell">
                            <div class="label">预计结束时间</div>
                            <div class="val">{{ formatDate2(plan.planPlayTimeEnd, 'YYYY-MM-DD') }}</div>
                        </div>
                    </div>
                    <div class="flex-box">
                        <div class="flex-box cell">
                            <div class="label">点位数量</div>
                            <div class="val">{{ numberToCurrencyNo(plan.pointNumber) }}</div>
                        </div>
                        <div class="flex-box cell">
                            <div class="label">计划金额</div>
                            <div class="val">{{ numberToCurrencyNo(plan.planPlayAmount) }}</div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="item">
                <div class="title">相关附件</div>
                <xc-table
                    :data="detailInfo.accessory"
                    :columns="[
                        { label: '类型', key: 'accessoryType', render: true },
                        { label: '名称', key: 'accessoryName' },
                    ]"
                    :row-config="signRowConfig"
                >
                    <template #accessoryType="{ row }">
                        {{ accessoryTypes[row.accessoryType] }}
                    </template>
                </xc-table>
            </div>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { onMounted, defineProps, ref } from 'vue';
import { JoinSignApprovalDTO } from '../ModelDefines';

import XcTable from '@x-tech/fe-pc-components/src/components/XcTableTemplate/index.vue';
import { getApprovaLog, getSignApproval, getArchiveDetail } from '@/api/delivery/customerManage';
import { accessoryTypes } from '@/utils/config';
import { numberToCurrencyNo } from '@/utils/filters';
import { formatDate2 } from '@x-tech/fe-utils/dist/date';

const props = defineProps({
    auditId: {
        type: String,
        default: '',
    },
    approveSignId: {
        type: String,
        default: '',
    },
    applyId: {
        type: String,
        default: '',
    },
});

const signRowConfig = [
    {
        color: '#4D88FF',
        name: '查看',
        on: (data: any) => {
            window.open(data.row.accessoryUrl);
        },
    },
    {
        color: '#4D88FF',
        name: '下载',
        on: (data: any) => {
            let aDom = document.createElement('a');
            aDom.style.display = 'none';
            aDom.href = data.row.accessoryUrl;
            aDom.target = '_blank';
            aDom.setAttribute('download', data.row.accessoryName || '');
            document.body.appendChild(aDom);
            aDom.click();
            document.body.removeChild(aDom);
        },
    },
];

const stepList: any = ref([]);
const detailInfo = ref<JoinSignApprovalDTO>({});
const loading = ref(false);

onMounted(async () => {
    loading.value = true;
    try {
        const data = await Promise.allSettled([
            getApprovaLog(props.auditId),
            props.approveSignId ? getArchiveDetail(props.approveSignId) : getSignApproval(props.applyId),
        ]);
        if (data[0].status === 'fulfilled') {
            stepList.value = data[0].value;
        }
        if (data[1].status === 'fulfilled') {
            detailInfo.value = props.approveSignId ? data[1].value : data[1].value;
        }
    } finally {
        loading.value = false;
    }
});
</script>

<style lang="scss" scoped>
.flex-box {
    display: flex;
}
.flex {
    flex: 1;
}
.content {
    height: 100%;
    .title {
        font-size: 16px;
        font-weight: 700;
        color: #333;
        line-height: 22px;
        margin-bottom: 16px;
    }
    .l {
        width: 204px;
        border-right: 1px solid #ededed;
        margin-right: 24px;
        display: flex;
        flex-direction: column;
        .steps {
            flex: 1;
            border-left: 1px solid rgba(230, 0, 68, 0.06);
            padding-top: 6px;
            margin-left: 4px;
            .step {
                font-size: 14px;
                padding-left: 12px;
                position: relative;
                &::after {
                    content: '';
                    width: 8px;
                    height: 8px;
                    border-radius: 50%;
                    background-color: #e60044;
                    position: absolute;
                    left: -4px;
                    top: 6px;
                    box-sizing: border-box;
                }
                .remark {
                    color: #e60044;
                    margin-top: 4px;
                }
                &.error {
                    .test {
                        color: #e60044;
                    }
                    &::after {
                        content: '';
                        border: 2px solid #e60044;
                        background-color: #fff;
                        width: 10px;
                        height: 10px;
                        left: -5px;
                    }
                }
                .test {
                    font-weight: 500;
                    color: #333;
                }
                .name {
                    font-weight: 400;
                    color: #333;
                    margin-top: 4px;
                }
                time {
                    display: block;
                    font-weight: 400;
                    color: #bcbcbc;
                    margin-top: 4px;
                }
            }
            .step + .step {
                margin-top: 40px;
            }
        }
    }
    .r {
        flex: 1;
        overflow-y: auto;
        margin-bottom: 25px;
        .item + .item {
            margin-top: 40px;
        }
        .plan-title {
            font-size: 14px;
            font-weight: 400;
            color: #333;
            margin-bottom: 8px;
        }
        .grid {
            border-bottom: 1px solid #e5e6eb;
            border-right: 1px solid #e5e6eb;
            .cell {
                border: 1px solid #e5e6eb;
                width: 100%;
                border-bottom: none;
                border-right: none;
            }
            .label {
                flex-basis: 120px;
                background-color: rgba(247, 249, 250, 1);
                height: 40px;
                line-height: 40px;
                text-align: center;
                font-size: 14px;
                color: #8c8c8c;
                border-right: 1px solid #e5e6eb;
            }
            .val {
                font-size: 14px;
                font-weight: 400;
                color: #333;
                box-sizing: border-box;
                padding: 0 20px;
                flex: 1;
                display: flex;
                align-items: center;
            }
        }
        .grid + .grid {
            margin-top: 24px;
        }
    }
}
</style>
